<template>
	<div></div>
	</template>
	
	<script setup>
	import * as THREE from 'three';
	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	
	//创建场景
	const scene = new THREE.Scene();


	//创建相机
	const camera = new THREE.PerspectiveCamera();
	camera.position.y = 3
	camera.position.z = 10
	
	
	//创建立方体
	const geometry = new THREE.BoxGeometry(1,1,1);

	//创建材质
	const material = new THREE.MeshPhongMaterial({
		color : 0x0099ff,
		//高亮度
		shininess : 1000
	});
	
	//网格
	const cube = new THREE.Mesh(geometry,material);
	cube.position.set(0,0.5,0)

	cube.receiveShadow = true;
	cube.castShadow = true;
	scene.add(cube);

	//添加灯光效果
	//添加环境光
	const light = new THREE.AmbientLight(0xffffff,1); //柔和的白光
	scene.add(light);

	//点光源
	const pointlight = new THREE.PointLight(0xffffff,100,100); //柔和的白光
	pointlight.position.set(5,3,5);
	pointlight.castShadow = true
	scene.add(pointlight);

	//添加反光地面
	const meshFloor = new THREE.Mesh(
		new THREE.PlaneGeometry(10,10),
		new THREE.MeshPhongMaterial({
			color: 0x1b5e20
		})
	)
	meshFloor.receiveShadow = true
		scene.add(meshFloor)

	//创建渲染器
	const renderer = new THREE.WebGLRenderer()
	document.body.appendChild(renderer.domElement)
	//调整渲染器窗口大小
	renderer.setSize(window.innerWidth,window.innerHeight);
	renderer.shadowMap.enabled = true
	
	//添加轨道控制器
	const controls = new OrbitControls(camera,renderer.domElement)
	
	function animate(){
		//告诉浏览器你希望执行一个动画
		requestAnimationFrame( animate);
		//轨道控制器更新
		controls.update();
		renderer.render(scene,camera);
	}
	animate();
	</script>
	
	<style>
	
	
	</style>
	